<template>
  <div class="py-20 md:py-28 text-center bg-grayLight">
    <div class="container m-auto max-w-screen-md px-4 md:px-0">
      <h2 class="text-38px text-black mb-8 font-bold">
        馬上客製化<br class="block md:hidden" />您的 CDN 專案
      </h2>
      <p style="color: red; font-size: 24px; font-weight: bold; padding-bottom: 35px">
        就差一步，即刻加速您的網站！
      </p>
      <div>
        <div class="text-left mb-2">
          <span class="text-black">聯絡姓名<small class="text-grayDark">＊</small></span>
        </div>
        <input
          class="mb-6 placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 px-3 focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm transition-all"
          type="text"
          placeholder="王大明*"
          v-model="fromData.name"
        />
      </div>
      <div>
        <div class="text-left mb-2">
          <span class="text-black">Email<small class="text-grayDark">＊</small></span>
          <span class="text-muted ml-3">請留下您可聯絡的真實信箱，僅供回覆使用</span>
        </div>
        <input
          class="mb-6 placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 px-3 focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm transition-all"
          placeholder="wangdaming@cocloud.com.tw*"
          v-model="fromData.email"
          @input="(e) => isValidEmail(e.target.value)"
          type="email"
        />
      </div>
      <div>
        <div class="text-left mb-2">
          <span class="text-black">聯絡電話<small class="text-grayDark">＊</small></span>
          <span class="text-muted ml-3">若為市話，請留下區碼及分機號碼</span>
        </div>
        <input
          class="mb-6 placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 px-3 focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm transition-all"
          placeholder="09XXXXXXXX*"
          type="tel"
          @input="(e) => isValidPhone(e.target.value)"
          v-model="fromData.phone"
        />
      </div>
      <div>
        <div class="text-left mb-2">
          <span class="text-black">公司名稱<small class="text-grayDark">＊</small></span>
        </div>
        <input
          class="mb-6 placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 px-3 focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm transition-all"
          type="text"
          placeholder="COCloud聚選匯雲*"
          v-model="fromData.companyName"
        />
      </div>
      <div>
        <div class="text-left mb-2">
          <span class="text-black">詢問內容<small class="text-grayDark">＊</small></span>
        </div>
        <textarea
          class="mb-6 placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 px-3 focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm transition-all"
          placeholder="Message 需求*"
          type="text"
          rows="8"
          v-model="fromData.memo"
        ></textarea>
      </div>
      <button
        @click="handleSave()"
        class="bg-orange hover:bg-orangeDark text-white text-l font-bold rounded py-4 px-14 inline-flex items-center justify-center"
      >
        立即加速
      </button>
    </div>
    <Message ref="messageRef" />
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import Message from "../components/Message.vue";
const fromData = reactive({
  name: "",
  email: "",
  phone: "",
  companyName: "",
  memo: "",
  isValid: false,
});
const messageRef = ref();
const handleSave = () => {
  const requestOptions = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ ...fromData, formType: 6,domain: location.host }),
  };
  let isPass = validateFun();
  if (isPass) {
    fetch(location.origin +"/webapi/email/sendMsg", requestOptions)
      .then((res) => {
        res.json().then((response) => {
          console.log("response", response);
          if (response.code == 0) {
            messageRef.value.showMessage(response.result, 2000, "success");
            fromData.name = ''
            fromData.email = ''
            fromData.phone = ''
            fromData.companyName = ''
            fromData.memo = ''
            fromData.isValid = false
          } else {
            messageRef.value.showMessage("发送失败", 2000);
          }
        });
      })
      .catch((err) => {
        console.log("err", err);
      });
  }
};
// 检查邮箱格式是否正确
const isValidEmail = (email) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    messageRef.value.showMessage("請輸入正確電子信箱地址", 2000);
    return false;
  } else {
    messageRef.value.hideMessage();
    return true;
  }
};

const isValidPhone = (phoneValue) => {
  const phoneRegex = /^[0-9]*$/;
  if (phoneValue.trim() === "") {
    messageRef.value.showMessage("請輸入電話號碼", 2000);
    return false;
  }

  if (!phoneRegex.test(phoneValue)) {
    messageRef.value.showMessage("請輸入正確電話號碼", 2000);
    return false;
  } else {
    messageRef.value.hideMessage();
    return true;
  }
};

const validateFun = () => {
  // 验证姓名字段是否为空
  if (fromData.name.trim() === "") {
    messageRef.value.showMessage("請輸入名字", 2000);
    return false;
  }

  // 验证邮箱字段是否为空和格式是否正确
  if (fromData.email.trim() === "") {
    messageRef.value.showMessage("請輸入電子信箱", 2000);
    return false;
  }

  if (!isValidEmail(fromData.email)) {
    messageRef.value.showMessage("請輸入正確電子信箱地址", 2000);
    return false;
  }

  // 验证电话字段是否为空和格式是否正确
  if (fromData.phone.trim() === "") {
    messageRef.value.showMessage("請輸入電話號碼", 2000);
    return false;
  }

  // 验证公司名字段是否为空
  if (fromData.companyName.trim() === "") {
    messageRef.value.showMessage("請輸入公司名稱", 2000);
    return false;
  }

  // 验证询问内容字段是否为空
  if (fromData.memo.trim() === "") {
    messageRef.value.showMessage("請輸入詢問內容", 2000);
    return false;
  }
  return true;
};
</script>

<style scoped>
.text-grayDark {
  color: red;
}
</style>
